<template>
  <div class="countdown">
  	<p>还剩 </p>
  	<span>{{_change(date[0])}}</span>
  	<p>：</p>
  	<span>{{_change(date[1])}}</span>
  	<p>：</p>
  	<span>{{_change(date[2])}}</span>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data () {
    return {
      timer: null,
      date: [0, 0, 0]
    }
  },
  props: {
    data: {
      type: Array,
      default: () => {
        return [0, 0, 0]
      }
    }
  },
  mounted() {
    this._time()
  },
  methods: {
    _change(val) {
       return val < 10 ? '0' + val : val
    },
    _time() {
      if (this.data.length === 3) {
        this.date = this.data
        let h = parseInt(this.date[0])
        let m = parseInt(this.date[1])
        let s = parseInt(this.date[2])
        this.timer = setInterval(() => {
          s--
          if (s === 0) {
            if (h === 0 && m === 0) {
              clearInterval(this.timer)
            } else {
              m--
              if (m === 0 && h !== 0) {
                h--
                m = 60
                s = 60
              } else {
                s = 60
              }
            }
          }
        this.date = [h, m, s]
      }, 1000)
      }
    }
  },
  destroyed() {
    clearInterval(this.timer)
  },
  watch: {
    data() {
      clearInterval(this.timer)
      this._time()
    }
  }
}
</script>

<style scoped lang="less">
.countdown{
	display: flex;
	align-item: center;
	font-size: 14px;
	color: #ed686d;	
	p{
		display: block;
		height: 30px;
		line-height: 32px;
		&:nth-child(1) {
			margin-right: 10px;
		}
	}
	span{
		width: 30px;
		height: 30px;
		line-height: 32px;
		border: solid 1px #ed686d;
		text-align: center;
	}
}
</style>
